<script setup lang="ts">
// 定义 props 类型
const props = defineProps<{
goodsList: GoodsList[];
}>(); </script>
<template>
<nav class="nav-menu">
<ul>
<li v-for="item in goodsList" :key="item.id">
<a :href="item.link">{{ item.name }}</a>
</li>
</ul>
</nav>
</template>
<style scoped>
.nav-menu {
background-color: #f2f2f2;
border-bottom:1px solid #ccc;
}
.nav-menu ul {
width:1440px;
margin:0 auto;
list-style:none;
display:flex;
justify-content: flex-start;
height:60px;
align-items:flex-end;
padding-bottom:10px;
}
.nav-menu a {
text-decoration:none;
padding:6px 20px;
color:#333
}
.nav-menu a:hover {
background-color:orange;
color:#fff;
border-radius:4px;
}</style>